<template>
  <!-- 表格 -->
  <div class="table-main">
    <!-- 订单类型tabs -->
    <TagList :selectable="!selectable" :statistics="statistics" @change="orderTabChange" />
    <!-- 时间快捷按钮 -->
    <TimeShortcutBtns v-if="!selectable" :queryParam="queryParam" @ok="timeShortcutBtnsOk" />
    <div class="table-main-scroll">
      <TableLeft
        :scrollTopRecorder="scrollTopRecorder"
        :activedDay="activedDay"
        :selectable="selectable"
        :stockData="virtualList"
        :maxHeight="MAX_HEIGHT"
        ref="tableLeftRef"
        @onScroll="(top) => onScroll(top, 'left')"
      />
      <TableRight
        :scrollTopRecorder="scrollTopRecorder"
        v-model:dayIndex="dayIndex"
        :platoonCarAble="platoonCarAble"
        :stockData="virtualList"
        :loading="loading"
        :maxHeight="MAX_HEIGHT"
        :selectable="selectable"
        ref="tableRightRef"
        @onScroll="(top) => onScroll(top, 'right')"
      />
      <ve-empty v-if="fetchLoaded && stockData.length == 0" />
    </div>
    <ve-toast ref="toastRef"></ve-toast>
  </div>
</template>

<script setup>
  import { getCarStock } from '@/api/asset/car-stock'
  import { ref, computed, reactive, provide } from 'vue'
  import { getDayList } from './tableUtil'
  import useVirtualScroll from './virtualScroll'
  import TableLeft from './table-left.vue'
  import TableRight from './table-right.vue'
  import TagList from '../../components/tag-list.vue'
  import TimeShortcutBtns from '../../components/time-shortcut-btns.vue'

  const MAX_HEIGHT = '1100rpx'

  const props = defineProps({
    selectable: {
      type: Boolean,
    },
    platoonCarAble: {
      type: Boolean,
      default: true,
    },
    parentQueryParam: Object,
  })

  const CarStockState = reactive({
    selectable: props.selectable,
    dateRange: [],
    dayList: [],
    dayPx: 0,
    hourPx: 0,
  })
  provide('CarStockState', CarStockState)

  // 订单状态切换
  const orderTabChange = (value) => {
    queryParam.value.typeList = value
    props.parentQueryParam.typeList = value
    loadData()
  }

  // 时间切换
  const timeShortcutBtnsOk = (range) => {
    queryParam.value.startTime = range[0]
    queryParam.value.endTime = range[1]
    CarStockState.dateRange = range
    calcDateList()
    props.parentQueryParam.startTime = range[0]
    props.parentQueryParam.endTime = range[1]
    loadData()
  }

  // 滚动
  const scrollTopRecorder = reactive({
    triggerType: 'left',
    top: 0,
  })
  // 滚动事件
  const onScroll = (top, type) => {
    scrollTopRecorder.triggerType = type
    scrollTopRecorder.top = top
    onVirtualScroll(top)

    if (top <= 5) {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 100,
      })
    } else {
      uni.pageScrollTo({
        scrollTop: 999999,
        duration: 200,
      })
    }
  }

  // 左上角年份月份
  const dayIndex = ref(0)
  const activedDay = computed(() => {
    const index = dayIndex.value < 0 ? 0 : dayIndex.value
    return CarStockState.dayList[index] ? CarStockState.dayList[index] : CarStockState.dayList[0]
  })

  const stockData = ref([])
  const statistics = ref({})
  const fetchLoaded = ref(false)
  const loading = ref(false)
  const toastRef = ref()
  const tableLeftRef = ref()
  const tableRightRef = ref()
  const { virtualList, initVirtualScroll, onVirtualScroll } = useVirtualScroll()
  const queryParam = ref({})

  const initQueryParam = (param) => {
    queryParam.value = {
      siteId: param.siteId,
      seriesIdList: param.seriesIdList,
      modelIdList: param.modelIdList,
      carIdList: param.carIdList,
      // 车辆列表-库存 进入单个车辆数据查询
      carId: param.carId,
      startTime: param.startTime,
      endTime: param.endTime,
      typeList: param.typeList,
      // 渠道
      channelTypeList: param.channelTypeList,
    }
    CarStockState.dateRange = [param.startTime, param.endTime]
    calcDateList()
    loadData()
  }
  const loadData = () => {
    loading.value = true
    toastRef.value.showLoading()
    getCarStock(queryParam.value)
      .then((res) => {
        fetchLoaded.value = true
        loading.value = false
        uni.stopPullDownRefresh()
        if (res.code == 200) {
          stockData.value = res.result.list
          statistics.value = res.result.statistics
          // 初始化虚拟列表
          initVirtualScroll(res.result.list)
          // 重置滚动位置
          tableLeftRef.value && tableLeftRef.value.resetScrollPosition()
          tableRightRef.value && tableRightRef.value.resetScrollPosition()
        }
      })
      .finally(() => {
        toastRef.value.hideLoading()
      })
  }

  const calcDateList = () => {
    dayIndex.value = 0
    const pageWidth = uni.getSystemInfoSync().windowWidth - 110
    CarStockState.dayList = getDayList(...CarStockState.dateRange)
    const dayPx = pageWidth / CarStockState.dayList.length
    let hourPx = (dayPx / 24).toFixed(2)
    // 小时像素最小2px
    if (hourPx < 3) {
      hourPx = 3
    }
    CarStockState.hourPx = hourPx
    CarStockState.dayPx = hourPx * 24
  }

  defineExpose({ loadData: initQueryParam })
</script>

<style lang="less" scoped>
  .table-main-scroll {
    min-height: 800rpx;
    position: relative;
    border-top: 1px solid #e3e4e6;
  }
</style>
